<%
var unit = @shiro.getPrincipalProperty('unit');
layout("/layout/unify.html",{title:unit.name}){
%>
<style>
    .chat-discussion {
        /*border:1px solid red;*/
        height: 600px;
    }
    .chat-discussion .chat-message{
        /*border:1px solid blue;*/
        /*position: relative;;*/

    }

    .chat-discussion .chat-message .message{
        display: inline-block;
        margin-left: 0px;
        margin-top: 10px;
        padding-top: 0;
        /*height: 50px;*/
        width:85%;
    }
    .chat-discussion .chat-message .message-avatar{
        margin-top: -18px;
    }
    .chat-discussion .chat-message .message .message-date{
        float:right;
    }

    .chat-discussion .chat-message .message-right2{
        text-align: right;
        margin-left:50px;
        /*padding-right:0;*/
    }
    .chat-discussion .chat-message .message-right2 .message-date{
        float: left;

    }

    .chat-discussion .chat-message .avatar-right{
        margin-right:4px;
        margin-top: 8px;
        float: right;
    }

    /* ===  chat-item-list ===*/

    #chat-list{
        overflow-y: auto;
        height:600px;
    }
    #chat-list .chat-item{
        border-bottom: 1px solid black;

    }
    #chat-list .chat-item  img{
        width: 60px;
        height:60px;
        margin-top: 10px;
        margin-bottom: 10px;
    }


    #chat-list .chat-item .chat-item-name{
        font-size: 14px;
        line-height: 50px;
        display: inline-block;
        /*background-color: #aac6e3;*/
        height:50px;
        margin-left:30px;
        margin-top:15px;
        padding-left: 10px;
        padding-right: 10px;
        /*border:1px solid*/
        /*padding-top: 15px;*/
        width:150px;

    }


    #chat-list .chat-item .chat-item-status{
        font-size: 18px;
        line-height: 32px;
        display: inline-block;
        margin-left: 40px;
    }

    .online{
        color:#00ff00;
    }
    .offline{
        color: #cccccc;
    }
</style>
<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox chat-view">

                    <div class="ibox-title">
                        <small class="pull-right text-muted">最新消息：2015-02-02 18:39:23</small> 聊天窗口
                    </div>

                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-md-9 ">
                                <div class="chat-discussion">

                                    <!--<div class="chat-message">-->
                                        <!--<img class="message-avatar" src="${base}/assets/img/a1.jpg" alt="">-->
                                        <!--<div class="message message-left">-->
                                            <!--<a class="message-author message-avatar-left" href="#"> 颜文字君</a><br>-->
                                            <!--<span class="message-date"> 2015-02-02 18:39:23 </span>-->
                                            <!--<span class="message-content">-->
											<!--蛋客服为了做最实用的客服系统。蛋客服为了做最实用的客服系统。蛋客服为了做最实用的客服系统。蛋客服为了做最实用的客服系统。-->
                                            <!--</span>-->
                                        <!--</div>-->
                                    <!--</div>-->


                                    <!--<div class="chat-message">-->
                                        <!--<img class="message-avatar avatar-right" src="${base}/assets/img/a1.jpg" alt="">-->
                                        <!--<div class="message message-right2">-->
                                            <!--<a class="message-author" href="#"> 颜文字君</a><br>-->
                                            <!--<span class="message-date"> 2015-02-02 18:39:23 </span>-->
                                            <!--<span class="message-content">-->
											<!--蛋客服为了做最实用的客服系统。蛋客服为了做最实用的客服系统。蛋客服为了做最实用的客服系统。蛋客服为了做最实用的客服系统。-->
                                            <!--</span>-->
                                        <!--</div>-->
                                    <!--</div>-->

                                </div>

                            </div>
                            <div class="col-md-3">
                               <div id="chat-list">
                                   <!--<div class="chat-item">-->
                                       <!--<img src="/assets/img/a1.jpg" alt="暂无图片">-->
                                       <!--<div class="chat-item-name">wendal</div>-->
                                       <!--<span class="chat-item-status online">在线</span>-->
                                   <!--</div>-->
                                   <div id="noone" style="margin-left:28%; display: block">
                                       <p style="line-height: 36px; font-size:26px;">暂无访客</p>
                                   </div>
                               </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="chat-message-form">
                                    <div class="form-group">
                                        <textarea class="form-control message-input" name="message" placeholder="输入消息内容，按回车键发送"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

<!--<script id="demo" type="text/html">-->

    <!--<div class="chat-message">-->
        <!--<img class="message-avatar" src="${base}/assets/img/a1.jpg" alt="">-->
        <!--<div class="message message-left">-->
            <!--<a class="message-author message-avatar-left" href="#"> 颜文字君</a><br>-->
            <!--<span class="message-date"> 2015-02-02 18:39:23 </span>-->
            <!--<span class="message-content">-->
            <!--蛋客服为了做最实用的客服系统。蛋客服为了做最实用的客服系统。蛋客服为了做最实用的客服系统。蛋客服为了做最实用的客服系统。-->
            <!--</span>-->
        <!--</div>-->
    <!--</div>-->
<!--</script>-->

<script id="join" type="text/html">

    {{#
        var checkStatus = function(chatId){
            var s = '[chat-id='+chatId+']';
            var sessions = $(s);
            console.log("sessions:");
            console.log(sessions);
            console.log(s);
            if(sessions.length>0){
                $.each(sessions,function(idx){
                    $(sessions[idx]).find('.chat-item-status').removeClass('offline');
                    $(sessions[idx]).find('.chat-item-status').addClass('online');

                    $(sessions[idx]).find('.chat-item-status').text("在线");
                });
                return false;
            }else{
                return true;
            }
        };
    }}

    {{#  if(checkStatus( d.curr_session.chatId )){ }}
        <div class="chat-item" chat-id="{{d.curr_session.chatId}}" curr-session-id="{{d.curr_session.id}}">
            <img src="/assets/img/a1.jpg" alt="暂无图片">
            <div class="chat-item-name">{{d.curr_session.name}}</div>
            <span class="chat-item-status online">在线</span>
        </div>
    {{#  } else { }}

    {{#  } }}

</script>

<script type="text/javascript" src="${base}/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/assets/js/plugins/layui/layui.all.js"></script>
<script type="text/javascript" src="${base}/assets/js/reconnecting-websocket.js"></script>
<script type="text/javascript" src="${base}/assets/js/websocket/dankefu-types.js"></script>
<script type="text/javascript" src="${base}/assets/js/websocket/dankefu-tpls.js"></script>
<script type="text/javascript" src="${base}/assets/js/websocket/dankefu.js"></script>
<script>
    console.log('${@conf.get("websocket.port")}');
    console.log('${@conf.get("websocket.ip")}');

    var ws;
    var laytpl;
    var start_time;
    var end_time;
    $(function(){
        start_time= new Date().getTime();
        layui.use('laytpl', function(){
            laytpl = layui.laytpl;
        });


        //初始化websocket连接
        ws = new ReconnectingWebSocket('ws://${@conf.get("websocket.ip")}:${@conf.get("websocket.port")}?service_id=${session.uid!}',null, {debug: true, reconnectInterval: 3000});

        ws.onopen = function(event){
            console.log("ws is open");
            end_time= new Date().getTime();
            console.log("init done: "+(end_time-start_time)+" ms");
        };

        ws.onerror = function(){
            console.log("ws is error");
        }

        ws.onclose = function(){
            console.log("ws is close");
        };

        ws.onmessage = function(event){
            console.log("ws recive message..");
            console.log(event.data);
            start_time= new Date().getTime();
            //处理消息
            handleMsg(event.data);
        }

        $("[name=message]").keydown(function(event){
            event=document.all?window.event:event;
            if((event.keyCode || event.which)==13){
                alert("发送消息");
            }
        });
    });

    function handleMsg(msgStr){
        var data = JSON.parse(msgStr);
        var action = data.action+"";
        switch (action){
            case type.S_RESP_JOIN:
                dankefu.s_handlers.join(data.body);
                break;
            case type.S_RESP_LEAVE:
                dankefu.s_handlers.leave(data.body);
                break;
            default:
                console.error("illegal action: "+action);
        }

        end_time = new Date().getTime();
        console.log("process done :"+(end_time-start_time)+" ms");
    }

</script>

<% } %>